'use client';

import { chakra } from '@chakra-ui/react'

function EditableInput({
    finishEdit = () => {},
    startEdit = () => {},
    value = '',
    isEditMode = false
}: {
    finishEdit?: (value: string) => void,
    startEdit?: () => void,
    value?: string,
    isEditMode?: boolean
}) {
    
    const submit = (value: string) => {
        finishEdit(value);
    }

    const onsubmit = (event: any) => {
        event.preventDefault();
        submit(event.target.elements.editName.value);
    }
    
    return isEditMode ? <chakra.form onSubmit={onsubmit} ><chakra.input name="editName" autoFocus={true} autoComplete="off" onBlur={(event) => submit(event.target.value) } w={"100%"} _focus={{outline: "none", backgroundColor: "transparent"}} defaultValue={value}/></chakra.form> : <chakra.div onDoubleClick={() => startEdit()} w={"100%"} overflow={"hidden"} textOverflow={"ellipsis"} whiteSpace={"nowrap"}>{value}</chakra.div>;
}

export default EditableInput;